import { ArticleModelState, IRouteComponentProps,PageModelState,useDispatch,useSelector } from 'umi'
import { useEffect } from 'react'
import { EyeOutlined, HeartOutlined, MessageOutlined, PartitionOutlined, ShareAltOutlined, SmileOutlined } from '@ant-design/icons'
import styles from '../index.less';
import { formatDate } from '@/utils';
const classNames = require('classnames');

const map:{[key:string]:string}={
  'msgboard':'2c1794cc-10d8-4d48-adda-7ff02371aee8',
  'about':'8f3973e9-4ed4-4849-ad85-b7d3b8093623'
}
const Msgboard: React.FC<IRouteComponentProps<{id:string}>> = ({match})=>{
  const path=match.params.id;
  const id=map[path];
  const dispatch=useDispatch()
  const {pageItem,pageCommentList}=useSelector((state:{page:PageModelState})=>state.page)
  const {articleList}=useSelector((state:{article:ArticleModelState})=>state.article)
  const flag=false
  const cross=[
        '😀','😃','😄','😁','😆','😆','😅','😂','😉','😊','😇','😍','😘','😗',
        '😚','😙','😋','😛','😜','😝','😐','😑','😶','😏','😒','😌','😔','😪',
        '😴','😷','😵','😎','😕','😟','😮','😯','😲','😳','😦','😧','😨','😰',
        '😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','😡','😡','😠','😈',
        '😺','😸','😹','😻','😼','😽','🙀','😿','😾','❤️','✋','✋','✌️','☝️',
        '✊','✊','🐵','🐱','🐮','🐭','☕','♨️','⚓','✈️','⌛','⌚','☀️','⭐',
        '☁️','☔','⚡','❄️','✨','🃏','🀄','☎️','☎️','✉️','✏️','✒️','✂️','♿',
        '⚠️','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','✖️',
        '➕','➖','➗',' ‼️ ','⁉️','❓','❔','❕','❗','❗','〰️','♻️','✅','☑️',
        '✔️','❌','❎','➰','➿','〽️','✳️','✴️','❇️',' ©️ ',' ® ',' ™️ ','ℹ️','Ⓜ️',
        '⚫','⚪','⬛','⬜','◼️','◻️','◾','◽',' ▪️ ',' ▫️ ']
  useEffect(()=>{
    dispatch({
      type:'page/getPageViews',
      payload:id
    })
    //获取评论列表
    dispatch({
      type:'page/getPageComment',
      payload:id
    })
    dispatch({
      type:'article/getArticleRecommend'
    })

    dispatch({
      //  命名空间
      type: "article/getArticlesList"
    })
  }, [])
  return <div>
    {/* 文章内容 */}
    <div className='message'>
    {
      id=='2c1794cc-10d8-4d48-adda-7ff02371aee8'?
      <div className='liu'>
        <div dangerouslySetInnerHTML={{__html:pageItem.content}}></div>
      </div>
      :
      <div className='guan'>
        <div>
          <div>
            <img src={pageItem.cover} alt="" />
          </div>
          <div dangerouslySetInnerHTML={{__html:pageItem.html}}></div>
          </div>
      </div>
    }
    </div>
    {/* 评论 */}
    <div className='comment'>
      <p>评论</p>
      <div className='release'>
        <div>
          <div>
            <textarea placeholder='请输入评论内容（支持 Markdown）' className='ant-input'></textarea>
          </div>
          <footer>
            <span className='Cross'
            onClick={()=>{}}><SmileOutlined /> 表情
              {
                flag?<div className='crosslist'>
                {
                  cross.map((item,index)=>{
                    return <span key={index}>{item}
                    {
                      (index+1)%14==0?<br></br>:''
                    }
                    </span>
                  })
                }
              </div>:''
              }
            </span>
            <div>
              <button>发布</button>
            </div>
          </footer>
        </div>
      </div>
      {
        pageCommentList.map(item=>{
          return <li key={item.id}>
            <header>
              <span className='ant-avatar ant-avatar-circle'>
                <span className='ant-avatar-string'>
                    {item.name.slice(0,1)}
                </span>
              </span>
              <strong>{item.name}</strong>
            </header>
            <main>
              <div>
                <p>{item.content}</p>
              </div>
            </main>
            <footer>
              <span>{item.userAgent} · </span>
              <time dateTime={item.updateAt}>6月前 </time>
              <span className='Cross'><MessageOutlined /> 回复</span>
            </footer>
            <div className='child'>
              {
                item.children.map(v=>{
                  return <div key={v.id}>
                        <header>
                          <span className='ant-avatar ant-avatar-circle'>
                            <span className='ant-avatar-string'>
                                {v.name.slice(0,1)}
                            </span>
                          </span>
                          <strong>{v.name}</strong>
                        </header>
                        <main>
                          <div>
                            <p>{v.content}</p>
                          </div>
                        </main>
                        <footer>
                          <span>{v.userAgent} · </span>
                          <time dateTime={v.updateAt}>6月前 </time>
                          <span className='Cross'><MessageOutlined /> 回复</span>
                        </footer>
                    </div>
                })
              }
            </div>
          </li>
        })
      }
    </div>
    {/* 推荐阅读 */}
    <div className='read'>
    <p>推荐阅读</p>
    <div className={styles.articleList}>
              <div className={styles.articleListItem}>
                {articleList.map(item => {
                  return <div key={item.id} >
                    <div className={styles.articleListItems}>
                      <header>
                        <div className={styles.titles1}>
                          <p>{item.title}</p>
                        </div>
                        <div className={styles.titles2}>
                          <span className={classNames(styles.shu, styles.shu1)}> ︱</span>
                          <span>{formatDate(item.publishAt)}前</span>
                          {
                            item.category != null ? <span className={styles.shu}>  ︱ </span> : <div></div>
                          }
                          <span>{item.category?.label}</span>
                        </div>
                      </header>
                      <main className={styles.titleitem}>
                        {
                          item.cover != null ? <div className={styles.imgs}>
                            <img src={item.cover} alt="" />
                          </div> : null
                        }
                        <div className={styles.rightitem}>
                          <p>{item.summary}</p>
                          <div>
                            <span><i><HeartOutlined /></i>{item.likes}</span>

                            <span><i><EyeOutlined /></i>{item.views}</span>

                            <span><i><PartitionOutlined /></i>分享</span>
                          </div>
                        </div>
                      </main>
                    </div>
                  </div>
                })}
                 {articleList.length && <div>loading...</div>}
              </div>
            </div>
          </div>
    </div>
}
export default Msgboard